---
title: اعتماد زر Rainbow في تطبيقك اللامركزي (dApp)
description: مكتبة للتوصيل والتشغيل لـ Wagmi لدعم محافظ Rainbow في تطبيقك اللامركزي
image: guide-rainbow-button.png
---

# اعتماد زر Rainbow في تطبيقك اللامركزي (dApp)

مكون `RainbowButton` هو الطريقة الأبسط لإضافة دعم لمحفظة Rainbow لتطبيقات dApps التي تستخدم `wagmi` وتفضل تجربة موصل أكثر تخصيصًا من [RainbowKit](https://www.rainbowkit.com/docs/installation).

**1. قم بتثبيت `@rainbow-me/rainbow-button` والتبعيات المرافقة له**

الحزمة متوافقة مع Next.js و React و Vite. تأكد من اتباع تحذيرات التبعية المرافقة.

```bash
npm install @rainbow-me/rainbow-button wagmi viem@2.x @tanstack/react-query
```

**2. قم بالتكوين مع Wagmi وثبت RainbowButton**

مرر نسخة من `rainbowConnector` إلى `createConfig` الخاص بواغمي مع `projectId` و`appName`، ثم غلل تطبيقك في `RainbowButtonProvider`. ثم أضف مكون `RainbowButton`.

```tsx
import '@rainbow-me/rainbow-button/styles.css';
import {
  RainbowButtonProvider,
  RainbowButton,
  rainbowConnector,
} from '@rainbow-me/rainbow-button';
import { WagmiProvider, createConfig, http } from 'wagmi';
import { mainnet } from 'viem/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

const config = createConfig({
  connectors: [
    rainbowConnector({
      appName: 'RainbowKit demo',
      projectId: 'YOUR_PROJECT_ID',
    }),
  ],
  chains: [mainnet],
  transports: {
    [mainnet.id]: http(),
  },
  ssr: true,
});

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowButtonProvider>
          <RainbowButton />
        </RainbowButtonProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}
```

يمكنك أيضًا استخدام مكون `RainbowButton.Custom` للتنفيذات والتصميمات المخصصة.

```tsx
<RainbowButton.Custom>
  {({ ready, connect }) => {
    return (
      <button
        type="button"
        disabled={!ready}
        onClick={connect}
      >
        Connect Rainbow
      </button>
    );
  }}
</RainbowButton.Custom>
```

**3. وهذا كل شيء!**

الآن يمكن لمستخدميك الاستمتاع بتجربة اتصال سلسة لرينبو — دون أي صيانة أو مشاكل.

هناك مكون [`WalletButton`](https://www.rainbowkit.com/docs/wallet-button) أيضًا متاح في [RainbowKit](https://www.rainbowkit.com/docs/installation) إذا كنت ترغب في اعتماد دعم لمحافظ إضافية.
